<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义事件</title>
        <style>
            .wrapper { border: 1px solid blue ; }
            .amount { 
                display: inline-flex; 
                width: 150px;
                height: 50px;
                line-height: 50px;
                background-color: #ff7033;
            }
            .amount>a {
                flex-basis: 40px;
                background: #00f;
                color: #fff;
                font-size: 36px;
                text-align: center;
                user-select: none;
            }
            .amount>input {
                width: 70px;
                font-size: 36px;
                text-align: center;
                border: none;
                outline: none;
            }
        </style>
    </head>
    <div>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const AmountComponent = {
                emits: [ '减少', '增加' ],
                props: {
                    amount: {
                        type: Number,
                        required: true
                    }
                },
                template: `<span class="amount">
                              <a @click="jiang">-</a>
                              <input type="text" :value="amount">
                              <a @click="sheng">+</a>
                           </span>`,
                methods: {
                    jiang(evt) {
                        console.log( 'event:', evt );
                        // 通过 $emit 函数来触发已经在父组件上监听的自定义事件
                        this.$emit('减少');
                    },
                    sheng(evt) {
                        console.log( 'event:', evt );
                        // 通过 $emit 函数来触发已经在父组件上监听的自定义事件
                        this.$emit('增加');
                    }
                }
            }

            const App = {
                components: {
                    AmountComponent
                },
                data() {
                    return {
                        counter: 1
                    }
                },
                template: `<div class="wrapper">
                              <!--监听子组件上的事件-->
                              <AmountComponent v-bind:amount="counter" 
                                               v-on:增加="increase" 
                                               @减少="decrease">
                              </AmountComponent>
                           </div>`,
                methods: {
                    increase() {
                        console.log( 'root component: increase' );
                        this.counter++;
                    },
                    decrease() {
                        console.log( 'root component: decrease' );
                        this.counter--;
                    }
                }
            }
            
            const app = Vue.createApp(App);
            app.mount('#application');
        </script>
    </div>
</html>